<template>
	<rh-wx class="my-card-exchange-container">
		<view class="card-content">
			<view class="label-txt">
				卡券编号
			</view>
			<view class="input-content flex-center">
				<u--input
					v-model="cardNumber" inputAlign="center" fontSize="32rpx"
					placeholder="输入卡券号码" border="none"
				></u--input>
			</view>
		</view>
		<view class="desc-content">
			<view class="desc-label">激活须知</view>
			<view class="desc-list">
				<view class="item">
					1. 商家服务完成后，请出示二维码，由商家扫描， 扫描完成后，服务结束；
				</view>
				<view class="item">
					2. 服务过程中，如果有任何疑问，可致电客服： 15895997449反馈
				</view>
				<view class="item">
					3. 服务完成后，可对商家进行服务评价打分 
				</view>
				<view class="item">
					4. 使用卡券，系统优先使用即将到期的卡券；
				</view>
			</view>
		</view>
		<rh-submit-btn text="立即兑换" :submit-action="submit"></rh-submit-btn>
	</rh-wx>
</template>

<script>
	import {getWxUserInfo} from '@/api/common/index.js'
	import {getWxCode, getUrlCode, isWechat, replaceWxUrl} from '@/script/wx-premission.js'
	import { coinCertificate } from "@/api/card/index.js"
	export default {
		data() {
			return {
				isWechat: isWechat(),
				cardNumber: '',
				needRegister: false,
			}
		},
		onLoad(e) {
			if(!this.isWechat) return
			this.wxLogin()
		},
		methods: {
			wxLogin(){
				return new Promise(async (resolve, reject) => {
					let _self = this
					const token = uni.getStorageSync('ICarddWx') || ''
					if(token) return resolve(false)
					let code = getUrlCode('code')
					if(!code){
						getWxCode(location.href)
					}else{
						await _self.getWxUserInfo(code).catch((err) => {
							let data = err.data
							if(data.code == 501){
								replaceWxUrl()
								getWxCode(location.href)
							}
						})
						resolve(true)
					}
				})
			},
			async getWxUserInfo(code) {
				let _self = this
				_self.needRegister = false
				await getWxUserInfo({code}).then(res => {
					let {isRegister = false, token} = res.data	
					if(isRegister){
						uni.setStorage({
							key: `icar-wxuser`,
							data: {...res.data},
							success: () => {
								_self.needRegister = true
							}
						})
					}else{
						uni.setStorage({
							key: `ICarddWx`,
							data: token,
						})
					}
				}).finally(() => {
					replaceWxUrl()
				})
			},
			submit(val){
				let _self = this
				let {name} = _self.$$router.getRoute(_self)
				let {query } = _self.$route
				if(_self.needRegister){
					_self.$$router.replace({name: 'registerTel', query:{
						redirect: name
					}})
				}
				return new Promise((resolve, reject) => {
					if(!_self.cardNumber || _self.cardNumber == '') {
						resolve(true)
						return _self.$attention.noIcon('卡券号码不能为空')
					}
					coinCertificate({cardNumber: _self.cardNumber}).then(res => {
						_self.$$router.push({name: 'cardExchangeSuccess', query: {
							id: res.data['orderId']
						}})
					}).finally(() => resolve(true))
				})
			},
		}

	}
</script>
<style lang="scss" scoped>
  // @include fontStyle(#666, 24rpx);
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.my-card-exchange-container{
		background-color: #F4F8F9;
		min-height: 100vh;
    padding: 50rpx 20rpx 0;
		.desc-content{
			margin-top: 30rpx;
			padding: 0 20rpx 40rpx;
			.desc-label{
				@include fontStyle(#3D3D3D, 32rpx);
			}
			.desc-list{
				margin-top: 32rpx;
				.item{
					margin-bottom: 10rpx;
					text-align: justify;
					@include fontStyle(#3D3D3D, 28rpx);
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
    .card-content{
      padding: 30rpx 20rpx 80rpx;
      background-color: #fff;
      .label-txt{
        @include fontStyle(#3D3D3D, 32rpx);
      }
      .input-content{
        margin-top: 30rpx;
        border-radius: 100rpx;
        border: 1rpx solid #DDDDDD;
        height: 80rpx;
      }
    }
	}

</style>

